<template>
	<view class="container">
		<!-- 支付成功顶部 -->
		<view class="top">
			<image src="../../static/equity_img/success.png" mode=""></image>
			<text class="m_t30 font30 bold" style="color: #32b28f;">支付已完成</text>
			<text class="m_t30 font26" style="color: #818181;">如对该订单有疑问，可联系在线客服</text>
		</view>
		<!-- 详情 -->
		<view class="detail m_t30">
			<view class="detail_top">
				<text class="font26" style="color: #818181;">认购数量</text>
				<view class="num_box  m_t10">
					<text class="font54">1000</text>
					<text class="font40">AD</text>
				</view>
			</view>
			<!-- 圆形样式 -->
			<view class="cirle_box">
				<view class="cirle_left"></view>
				<view class="line"></view>
				<view class="cirle_right"></view>
			</view>
			<!-- 内容 -->
			<view class="content font26">
				<view class="hang">
					<text>AD积分</text>
					<text>500</text>
				</view>
				<view class="hang">
					<text>现金</text>
					<text>500</text>
				</view>
				<view class="hang">
					<text>交易时间</text>
					<text>2019.06.10</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
	}
	.container{
		width: 100%;
		height: 100%;
		background: #f4f4f8;
		border-top: 1upx solid #EFEFF0;
		padding: 24upx 32upx;
		.top {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #fff;
			padding: 80upx 0;
			border-radius: 12upx;
			image {
				width: 128upx;
				height: 128upx;
			}
		}
		.detail {
			display: flex;
			flex-direction: column;
			background: #fff;
			// 认购数量部分
			.detail_top {
				padding: 30upx 0 24upx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}
			// 密封线
			.cirle_box {
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// 圆圈
				.cirle_left {
					width: 12upx;
					height: 20upx;
					border-radius: 0px 60upx 60upx 0;
					border-left: none;
					background: #f3f6f7;
				}
				.cirle_right {
					width: 12upx;
					height: 20upx;
					border-radius: 60upx 0px 0 60upx;
					border-right: none;
					background: #f3f6f7;
				}
				.line {
					width: 86vw;
					border-top: 1px dashed #c7c7c7;
				}
			}
			// 详情内容部分
			.content {
				padding: 24upx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				.hang {
					padding: 10upx 0;
					display: flex;
					text:nth-of-type(1) {
						width: 26vw;
					}
				}
			}
		}
	}
</style>
